<template>
  <van-swipe class="my-swipe" :autoplay="3000" lazy-render indicator-color="white">
    <van-swipe-item v-for="(item, index) in banner" :key="index">
      <a :href="item.url" target="_blank" v-if="item.url">
        <img :src="item.picture" />
      </a>
      <img v-else="item.url" :src="item.picture" />
    </van-swipe-item>
  </van-swipe>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue';
import { showToast } from 'vant';
import { bannerList } from '@/api/task';

const props = defineProps({
  type: { type: Number },
});

interface bannerItem {
  id: number;
  picture: string;
  url: string;
}

const banner = ref<bannerItem[]>([]);

const getBannerList = async () => {
  const res: any = await bannerList({ type: props.type });
  if (res) {
    banner.value = res.list;
  } else {
    showToast(res.msg);
  }
};

if (banner.value.length === 0) getBannerList();
</script>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  img {
    width: 100%;
    height: 7.47rem;
    border-radius: 0.5rem;
  }
}

:deep(.van-swipe__track) {
  height: 7.47rem;
}
</style>
